$(".mask").mouseover(function() {
    $(".float_layer").show()
    $(".particulars-pic-big").show()
})
$(".mask").mouseout(function() {
    $(".float_layer").hide()
    $(".particulars-pic-big").hide()
})

$(".mask").mousemove(function(e) {
    var l = e.pageX - $(".particulars-pic-small").offset().left - ($(".float_layer").width() / 2)
    var t = e.pageY - $(".particulars-pic-small").offset().left - ($(".float_layer").height() / 2)
    if (l < 0) {
        l = 0
    }
    if (l > $(this).width() - $(".float_layer").width()) {
        l = $(this).width() - $(".float_layer").width()
    }
    if (t < 0) {
        t = 0
    }
    if (t > $(this).height() - $(".float_layer").height()) {
        t = $(this).height() - $(".float_layer").height()
    }

    $(".float_layer").css({
        "left": l,
        "top": t
    })
    var pX = l / ($(".mask").width() - $(".float_layer").width())
    var pY = t / ($(".mask").height() - $(".float_layer").height())
    $(".particulars-pic-big img").css({
        "left": -pX * ($(".particulars-pic-big img").width() - $(".particulars-pic-big").width()),
        "top": -pY * ($(".particulars-pic-big img").height() - $(".particulars-pic-big").height())
    })
})